<template>
  <el-container class="course-detail">
    <el-container class="main-section">
      <el-main class="main-content">
        <el-card shadow="hover" class="video-card">
          <h2 class="course-title">{{ course.title }}</h2>
          <video controls :src="currentVideoUrl" class="video-player"></video>
          <div class="course-details">
            <p class="course-description">{{ course.description }}</p>
            <el-row class="course-meta">
              <el-col :span="12">
                <el-tag type="primary">价格: ￥{{ course.price }}</el-tag>
              </el-col>
              <el-col :span="12" class="course-updated">
                更新时间: {{ course.updatedAt }}
              </el-col>
            </el-row>
          </div>
        </el-card>

        <el-card shadow="hover" class="comments-container">
          <h3 class="section-header">评论</h3>
          <el-divider></el-divider>
          <div class="comment-list">
            <CommentItem
                v-for="comment in comments"
                :key="comment.commentId"
                :comment="comment"
                @likeComment="likeComment"
                @replyToComment="replyToComment"
            />
          </div>
        </el-card>
      </el-main>
    </el-container>

    <el-aside width="300px" class="chapter-section">
      <h3 class="section-header">章节</h3>
      <el-menu default-active="0" class="chapter-menu" @select="selectChapter">
        <el-menu-item
            v-for="(chapter, index) in course.chapters"
            :key="chapter.chapterId"
            :index="String(index)"
            class="menu-item"
        >
          <div class="content">
            {{ chapter.title }}
            <el-tag type="primary" class="description">{{ chapter.description }}</el-tag>
          </div>
        </el-menu-item>
      </el-menu>
    </el-aside>

    <div v-if="!isCommenting" class="fixed-comment-btn">
      <el-button type="primary" @click="showCommentInput(0)">点击评论</el-button>
    </div>

    <div v-if="isCommenting" class="fixed-comment-input">
      <el-input
          type="textarea"
          v-model="newComment"
          placeholder="添加评论"
          class="comment-input"
      />
      <el-button type="primary" @click="submitComment()" class="comment-submit">提交</el-button>
      <el-button type="text" @click="cancelComment" class="comment-submit">取消</el-button>
    </div>
  </el-container>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useRoute } from "vue-router";
import { getChapters } from "@/apis/chapter.js";
import CommentItem from '@/views/course/components/CommentItem.vue';// 引入递归组件
import { addComment, getComments } from "@/apis/comment.js";

const route = useRoute();
const courseId = route.params.id;
const course = ref({});
const isCommenting = ref(false);
const newComment = ref('');
const selectedChapterIndex = ref(0);
const selectedParentId = ref(0); // 用于存储父评论的 ID

const getChapter = async () => {
  const res = await getChapters(courseId);
  const courseData = res.data.courses;
  const chapterData = res.data.chapterVoList;

  course.value = {
    courseId: courseData.courseId,
    image: courseData.image,
    title: courseData.title,
    description: courseData.description,
    price: courseData.price,
    updatedAt: courseData.updatedAt,
    chapters: chapterData.map((chapter) => ({
      chapterId: chapter.chapterId,
      title: chapter.title,
      playUrl: chapter.playUrl,
      description: chapter.description,
      createdAt: chapter.createdAt,
      updatedAt: chapter.updatedAt,
    })),
  };
};

onMounted(() => {
  getChapter();
  getComment();
});

const comments = ref([]);

const getComment = async () => {
  const res = await getComments(courseId);
  comments.value = res.data;
};

const currentVideoUrl = computed(() => {
  return course.value.chapters && course.value.chapters.length > 0
      ? course.value.chapters[selectedChapterIndex.value].playUrl
      : '';
});

const selectChapter = (index) => {
  selectedChapterIndex.value = parseInt(index);
};

const showCommentInput = (parentId) => {
  isCommenting.value = true;
  selectedParentId.value = parentId; // 选择父评论的 ID
};

const cancelComment = () => {
  isCommenting.value = false;
  newComment.value = '';
  selectedParentId.value = 0; // 重置父评论 ID
};

const submitComment = async () => {
  if (newComment.value.trim() !== '') {
    const commentDTO = {
      courseId: courseId,
      content: newComment.value,
    };
    await addComments(commentDTO);
    newComment.value = '';
    isCommenting.value = false;
    await getComment(); // 刷新评论区
  }
};

const addComments = async (commentDTO) => {
  await addComment(commentDTO, selectedParentId.value);
};

const likeComment = (comment) => {
  console.log("点赞: ", comment);
};

const replyToComment = (comment) => {
  isCommenting.value = true;
  selectedParentId.value = comment.commentId; // 设置回复评论的 ID
  console.log(selectedParentId.value)
};
</script>


<style scoped>
.el-main {
  overflow-y: auto; /* 保持纵向滚动条 */
}

/* 对滚动条进行样式调整 */
.el-main::-webkit-scrollbar {
  width: 8px; /* 滚动条的宽度 */
}

.el-main::-webkit-scrollbar-thumb {
  background: rgb(246, 247, 248); /* 滚动条滑块的颜色 */
  border-radius: 10px; /* 滚动条滑块的圆角 */
}

.el-main::-webkit-scrollbar-track {
  background: #f1f1f1; /* 滚动条轨道的颜色 */
}

.course-detail {
  display: flex;
  height: 100vh;
}

.main-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px;
  overflow-y: auto;
}

.main-content {
  flex-direction: column;
}


.video-card {
  margin-bottom: 20px;
  padding: 15px;
  border-radius: 10px; /* Rounded corners */
  background-color: #fff; /* Card background */
}

.course-title {
  font-size: 1.8rem; /* Increased font size for title */
  font-weight: bold;
  margin-bottom: 10px;
}

.video-player {
  width: 100%;
  height: auto; /* Maintain aspect ratio */
  max-height: 500px; /* Adjust as needed */
  border-radius: 8px; /* Rounded corners for video */
  margin-bottom: 10px; /* Space below video */
}

.course-description {
  font-size: 1rem; /* Description font size */
  color: #666; /* Description color */
  margin-bottom: 10px; /* Space below description */
}

.course-meta {
  margin-top: 10px; /* Space above meta info */
}

.course-updated {
  text-align: right; /* Align updated time to the right */
}

.comments-container {
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.comment-list {
  margin-bottom: 20px;
}


.comment-actions .el-button {
  color: #666;
}

.comment-actions .el-button:hover {
  color: #0073ff;
}

.comment-input {
  width: 100%;
  margin-top: 20px;
}

.comment-submit {
  margin-top: 10px;
}

.chapter-section {
  padding: 20px;
  background: #f7f7f7;
  overflow-y: auto;
  border-left: 1px solid #e0e0e0;
}

.chapter-menu {
  border: none;
}

.section-header {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 10px;
}

.menu-item .content {
  display: flex;
  align-items: center;
}

.menu-item .description {
  margin-left: 30px;
}

.fixed-comment-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

.fixed-comment-input {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: white;
  padding: 10px 20px;
  border-top: 1px solid #e0e0e0;
}

.comment-input {
  width: 100%;
  margin-bottom: 0px;
}

.comment-submit {
  margin-right: 10px;
}
</style>
